<template>
  <div style="position: absolute; height: 100%; width: 100%;">
    <el-container>
      <el-header>
        <div style="margin-top: 10px; text-align: right; padding-right: 30px">
          <el-button v-permission="&quot;8f89693b723f49458a7f90c426f03aa5&quot;" size="mini" @click="showAddDepartment=true">新增部门</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table
          :data="deptData"
          border
          style="width: 100%"
        >
          <el-table-column prop="deptCode" label="部门编号" align="center" />

          <el-table-column prop="deptName" label="部门名称" align="center" />

          <el-table-column prop="superiorDeptId" label="上级部门ID" align="center" />

          <el-table-column prop="areaName" label="地区名称" align="center" />

          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button v-permission="&quot;765cf137c24e4c508c0f0dc1ff1d081b&quot;" size="mini" @click="selectedDepartment=scope.row; showUpdateDepartment=true">修改</el-button>
              <el-button v-permission="&quot;bebb70612d304832b40b2926327d6876&quot;" size="mini" type="danger" @click="deleteDept(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

    </el-container>

    <el-dialog title="修改用户" :visible.sync="showUpdateDepartment" :close-on-click-modal="false" :close-on-press-escape="false">
      <updateDepartment v-if="showUpdateDepartment" :id="selectedDepartment.deptId" @refresh="getDeptData" @closeDialog="showUpdateDepartment = false" />
    </el-dialog>

    <el-dialog title="新增部门" :visible.sync="showAddDepartment" :close-on-click-modal="false" :close-on-press-escape="false">
      <addDepartment v-if="showAddDepartment" :id="showAddDepartment.id" @refresh="getDeptData" @closeDialog="showAddDepartment = false" />
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import axios from 'axios'
import addDepartment from './components/addDepartment';
import updateDepartment from './components/updateDepartment';
import qs from 'qs';
import crypto from 'crypto'

export default {
  components: { addDepartment, updateDepartment },
  data() {
    return {
      deptData: [],
      showAddDepartment: false,
      showUpdateDepartment: false,
      selectedDepartment: null,
      listLoading: true,
      pageInfo: [

        { username: 'sun',
          account: '123456',
          roleName: '管理员' }

      ],
      selectedUser: null,
      options: [],
      searchDate: [],
      searchData: {
        currentPage: 1,
        size: 10
      }
    }
  },
  created() {

  },
  mounted() {
    this.getDeptData();
  },
  methods: {
    getDeptData() {
      var md5 = crypto.createHash('md5');
      md5.update('123');
      var id = md5.digest('hex');
      this.$axios({
        method: 'post',
        url: '/sysDept/queryAllDept',
        data: qs.stringify({ token: 'abc123', userId: id, userName: 'wang' })
      }).then((res) => {
        var status = res.data.status;
        if (status == 200) {
          this.deptData = res.data.data;
        } else {
          this.$message(res.data.message)
        }
      })
    },
    deleteDept(index, row) {
      var userId = sessionStorage.getItem('userId');
      var userName = sessionStorage.getItem('userName');
      var token = sessionStorage.getItem('token');
      this.$confirm('确认删除？')
        .then(_ => {
          this.$axios({
            url: '/sysDept/deleteDeptById',
            method: 'post',
            data: qs.stringify({ token: token, userId: userId, uName: userName, deptId: row.deptId })
          }).then((res) => {
            if (res.status == 200) {
              this.$message(res.data.data);
              this.getDeptData();
            } else {
              this.$message(res.data.data)
            }

            // this.getUserTablePage();
          }).catch(_ => {})
        }).catch(_ => {});
    }

    // getSearchDate(date) {
    //   if (date != null) {
    //     this.searchData.startTime = new Date(date[0])
    //     this.searchData.endTime = new Date(date[1])
    //   } else {
    //     this.searchData.startTime = null
    //     this.searchData.endTime = null
    //   }
    // }
  }
}
</script>
<style scoped>
  html, body {
      height:100%;
    }
    .el-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 0;
      left:0;
    }
    .el-header {
      margin-top: 10px;
      height: auto !important;
      min-height: 60px !important;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .el-footer {
      text-align: center;
      padding: 14px 6px;
    }
    .el-main {
      height: 100%;
      padding: 10px !important;
      flex-grow: 1;
      flex-shrink: 1;
      overflow-y: auto;
    }
    .searchBtn {
      position: absolute;
      right: 30px;
    }
  /*  /deep/ .el-dialog__body{
      height: 85vh;
      overflow-y: auto;
    } */
</style>
